バブルチャート

バブルチャートは、3 つの次元のデータを同時に表示するために使用されます。バブルの位置は、最初の 2 つの次元と、対応する水平軸と垂直軸によって決まります。 3 番目の次元は、個々のバブルのサイズによって表されます。

使用例

// For a bubble chart
var myBubbleChart = new Chart(ctx, {
    type: 'bubble',
    data: data,
    options: options
});

バブルチャートでは、データセットごとに多数のプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、泡の色は通常このように設定されます。

名前	タイプ	スクリプト可能	インデックス可能	デフォルト
`backgroundColor`	`Color`	はい	はい	`'rgba(0, 0, 0, 0.1)'`
`borderColor`	`Color`	はい	はい	`'rgba(0, 0, 0, 0.1)'`
`borderWidth`	`number`	はい	はい	`3`
`data`	`object[]`	-	-	必要
`hoverBackgroundColor`	`Color`	はい	はい	`undefined`
`hoverBorderColor`	`Color`	はい	はい	`undefined`
`hoverBorderWidth`	`number`	はい	はい	`1`
`hoverRadius`	`number`	はい	はい	`4`
`hitRadius`	`number`	はい	はい	`1`
`label`	`string`	-	-	`undefined`
`order`	`number`	-	-	`0`
`pointStyle`	`string`	はい	はい	`'circle'`
`rotation`	`number`	はい	はい	`0`
`radius`	`number`	はい	はい	`3`

名前	説明
`label`	凡例とツールヒントに表示されるデータセットのラベル。
`order`	データセットの描画順序。

各バブルのスタイルは、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.point.*オプション。

各バブルとの相互作用は、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.point.*オプション。

バブルチャートタイプのデフォルト値を変更することもできます。これを行うと、この時点以降に作成されるすべてのバブルチャートに新しいデフォルトが設定されます。バブルチャートのデフォルト設定には、次の場所からアクセスできます。Chart.defaults.bubble。

バブルチャートデータセットには、data点の配列。各点は次のプロパティを含むオブジェクトで表されます。

{
    // X Value
    x: number,

    // Y Value
    y: number,

    // Bubble radius in pixels (not scaled).
    r: number
}

重要：半径プロパティ、rはいいえチャートによってスケールされた、キャンバス上に描画されるバブルの生の半径 (ピクセル単位) です。